<template>
    <div id="tmpl">
        <div class="row" v-for="(item,index) in datalist">
            <mt-switch class="switch" v-model="value[index]">开关</mt-switch>
            <img class="img" :src="item.thumb_path" height="75" width="75" alt="">
            <div class="inforight">
                <h4 v-text="item.title"></h4>
                <div class="bottom">
                    <ul>
                        <li><span>${{item.sell_price}}</span></li>
                        <li><carinputNumber :initCount="item.cou" :goodsid="item.id" v-on:cardataobj="getiInputNumber"></carinputNumber></li>
                        <li><a href="javascript:void(0)" @click="delrow(item.id,index)">删除</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="total">
            <div class="desc">
                <ul>
                    <li>总计(不含运费)</li>
                    <li>已勾选商品{{totalcount}}件,总价:${{totalAmount}}元</li>
                </ul>
            </div>
            <div id="button">
                <mt-button type="danger" size="small">去计算</mt-button>
            </div>
        </div>
        {{value}}
    </div>
</template>

<script>

import carinputNumber from '../subcom/carinputNumber.vue';

import {Toast} from 'mint-ui';

import con from '../../kits/common.js'

import {getgoodsObj,updateData,removeItem} from '../../kits/LocalStorage.js';

    export default {
        components:{
            carinputNumber
        },
        computed:{
            //定义计算总件数的属性
            totalcount(){
                //计算逻辑:只需要计算出this.value数组中的true值有多少个即可
                var trueArr  = this.value.filter(function(item){return item;});
                //计算出当前选中的商品的总价格
                //计算方式: 当前商品的购买数量*商品单价(其中两个值均从this.datalist中来)
                var amount  = 0;
                this.value.forEach((item,index)=>{
                    //判断当前item如果为true的话,则这个商品的总价格是要计算的
                    if(item){
                        var count  = this.datalist[index].cou;
                        var price = this.datalist[index].sell_price;
                        var itemamount = count * price;
                        amount += itemamount;
                    }
                })
                this.totalAmount = amount;
                return trueArr.length;
            }
        },
        data(){
            return {
                totalAmount:0,
                value:[],
                datalist:[
                    {
                        "cou":1,
                        "id":87,
                        "title":"华为(HUAWEI)荣耀6",
                        "sell_price":2195,
                        "thumb_path":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555062348700&di=7031375c2f22ba7dba520c7cc0f377fa&imgtype=0&src=http%3A%2F%2Fimg4.gomein.net.cn%2Fimage%2Fbbcimg%2Fproduction_image%2Fnimg%2F201511%2F30%2F23%2F38%2F3734d143a231b32468bd_800.jpg",
                    },{
                        "cou":1,
                        "id":88,
                        "title":"华为(HUAWEI)荣耀6",
                        "sell_price":2195,
                        "thumb_path":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555062348700&di=7031375c2f22ba7dba520c7cc0f377fa&imgtype=0&src=http%3A%2F%2Fimg4.gomein.net.cn%2Fimage%2Fbbcimg%2Fproduction_image%2Fnimg%2F201511%2F30%2F23%2F38%2F3734d143a231b32468bd_800.jpg",
                    },{
                        "cou":1,
                        "id":89,
                        "title":"华为(HUAWEI)荣耀6",
                        "sell_price":2195,
                        "thumb_path":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555062348700&di=7031375c2f22ba7dba520c7cc0f377fa&imgtype=0&src=http%3A%2F%2Fimg4.gomein.net.cn%2Fimage%2Fbbcimg%2Fproduction_image%2Fnimg%2F201511%2F30%2F23%2F38%2F3734d143a231b32468bd_800.jpg",
                    },{
                        "cou":1,
                        "id":90,
                        "title":"华为(HUAWEI)荣耀6",
                        "sell_price":2195,
                        "thumb_path":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555062348700&di=7031375c2f22ba7dba520c7cc0f377fa&imgtype=0&src=http%3A%2F%2Fimg4.gomein.net.cn%2Fimage%2Fbbcimg%2Fproduction_image%2Fnimg%2F201511%2F30%2F23%2F38%2F3734d143a231b32468bd_800.jpg",
                    },
                ]
            }
        },
        created(){
            //调用方法获取购物车列表数据
            this.getdatalist();
            //为了解决一个BUG所以必须在此处初始化value数组全部为false
            // this.value.push(false);
        },
        methods:{
            //删除一行数据
            delrow(goodsid,index){
                //将this.value中的index这个位置的值移除(当移除了这个值的时候就会自动触发计算属性totalcount的执行)
                this.value.splice(index,1);
                //将this.datalist中的index这个位置的值移除(当移除了这个值的时候就会自动触发计算属性totalcount的执行)
                this.datalist.splice(index,1);

                //将localStorage中的goodsid对应的所有值移除
                removeItem(goodsid);

            },
            getdatalist(){
                var obj = getgoodsObj();

                var idstring  = '';
                for(var key in obj){
                    idstring += key+',';
                }

                idstring = idstring.substring(0,idstring.length-1);

                var url = con.base + "/api/goods/getshopcarlist/"+idstring;

                this.$http.get(url).then(function(res){
                    //判断状态
                    if(res.body.status !=0){
                        Toast(res.body.message);
                        return;
                    }
                    //将localStorage中的所有的商品对应的count的值赋值给message中每个对象的cou
                    res.body.message.forEach((item)=>{
                        item.cou  = obj[item.id];
                        //为了解决一个BUG所以必须在此处初始化value数组全部为false
                        console.log(this);
                        this.value.push(false);
                    });

                    this.datalist = res.body.message;
                })
            },
            getiInputNumber(resObj){
                
                updateData(resObj);

                
                    for(var i=0;i<this.datalist.length;i++){
                        if(this.datalist[i].id == resObj.goodsid){
                            
                            if(resObj.type == 'add'){
                                this.datalist[i].cou = this.datalist[i].cou+1;
                            }else{
                                this.datalist[i].cou = this.datalist[i].cou-1;
                            }
                            break;
                        }
                    }
                
            },
        }
    }
</script>

<style scoped>
    .row{
        border-bottom: 1px solid rgba(0, 0, 0, 0.4);
        height: 102px;
        display: flex;
        
    }

    .switch{
        flex: 1 0 -1px;
    }

    .img{
        height: 75px;
        width: 75px;
        flex:0 0 65px;
        padding-top: 10px;
    }

    .inforight{
        flex:1;
        
    }

    .inforight li {
        list-style: none;
        display: inline-block;
        
    }
    .inforight h4{
        color: #0094ff;
        font-size: 14px;
    }

    .bottom li:first-child{
        color:red;
        margin-right: 5px;
    }

   .bottom li:last-child{
        margin-left: 5px;
    }


    #total{
        height: 150px;
        background-color: rgba(0, 0, 0, 0.1);
        display: flex;
        padding: 5px;
    }

    #total ul{
        padding-left: 0px;
    }

    #total li{
        list-style: none;
        font-size: 14px;
    }

    #button{
        flex:0 0 60px;
        margin: 30px 0 0 0;
    }

    .desc{
        flex:1;
    }
</style>

